/**
 * 统一动画样式 
 */


/* 主要内容区域的过渡动画 */
.transition-main {
    transition: 
        opacity var(--duration-medium) var(--ease-decelerate),
        transform var(--duration-medium) var(--ease-decelerate);
}

/* 离开动画 - 内容向右上滑出并淡出 */
.transition-leaving {
    transition:
        transform var(--duration-medium) var(--ease-accelerate),
        opacity var(--duration-medium) var(--ease-accelerate);
}

html.is-changing .transition-main {
    transition: 
        opacity var(--duration-medium) var(--ease-decelerate),
        transform var(--duration-medium) var(--ease-decelerate);
}

html.is-leaving .transition-main {
    transition: 
        opacity 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19),
        transform 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* 进入动画 - 从右下角轻微滑入，模仿yukina效果 */
html.is-animating .transition-main {
    opacity: 0;
    transform: translateY(1.5rem) translateX(0.5rem);
}

/* 离开动画 - 向左上角滑出 */
html.is-animating.is-leaving .transition-leaving {
    transform: translateY(-1rem) translateX(-0.5rem);
    opacity: 0;
}

/* Swup fade 动画 - 保持兼容性 */
html.is-changing .transition-swup-fade {
    transition: all 300ms ease-out;
}

html.is-animating .transition-swup-fade {
    opacity: 0;
    transform: translateY(1.5rem);
}

/* ===== 页面切换状态类 ===== */
html.is-leaving .transition-leaving {
    transform: translateY(-1rem);
    opacity: 0;
}

html.is-entering .transition-main {
    transform: translateY(1.5rem);
    opacity: 0;
}

/* 离开动画类 */
.animate-leave {
    transform: translateY(-1rem) !important;
    opacity: 0 !important;
    transition: 
        transform 250ms cubic-bezier(0.4, 0, 0.6, 1),
        opacity 250ms cubic-bezier(0.4, 0, 0.6, 1) !important;
}

/* ===== 增强的组件动画 ===== */
.enhanced-fade-in {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.98);
    transition: 
        opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

.enhanced-fade-in.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 侧边栏动画 */
.sidebar-animate {
    opacity: 0;
    transform: translateX(-2rem);
    transition: 
        opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-animate.animate {
    opacity: 1;
    transform: translateX(0);
}

/* 卡片动画 */
.card-animate {
    opacity: 0;
    transform: translateY(2rem) scale(0.95);
    transition: 
        opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card-animate.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 文章内容动画 */
.post-content-animate {
    opacity: 0;
    transform: translateY(1rem);
    transition: 
        opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.post-content-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 导航栏动画增强 */
.navbar-animate {
    opacity: 0;
    transform: translateY(-1rem);
    transition: 
        opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 页脚动画 */
.footer-animate {
    opacity: 0;
    transform: translateY(1rem);
    transition: 
        opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

/* ===== 特殊元素的动画 ===== */
.transition-slide-in {
    opacity: 0;
    transform: translateY(20px) translateX(8px);
    transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.transition-slide-in.active {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* 卡片动画 */
.card-animation {
    opacity: 0;
    transform: translateY(30px) translateX(10px) scale(0.98);
    transition: all 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-animation.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* 导航动画 */
.nav-animation {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav-animation.loaded {
    opacity: 1;
    transform: translateX(0);
}

/* ===== 按钮悬停动画增强 ===== */
.button-enhance {
    transition: 
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.button-enhance:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.button-enhance:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== 链接动画增强 ===== */
.link-enhance {
    position: relative;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.link-enhance::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.link-enhance:hover::after {
    width: 100%;
}

/* ===== 图片加载动画 ===== */
.image-animate {
    opacity: 0;
    transform: scale(1.05);
    transition: 
        opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.image-animate.loaded {
    opacity: 1;
    transform: scale(1);
}

/* ===== 搜索框动画 ===== */
.search-animate {
    transform: scale(0.95);
    opacity: 0;
    transition: 
        transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.search-animate.animate {
    transform: scale(1);
    opacity: 1;
}

/* ===== 标签云动画 ===== */
.tag-animate {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.9);
    transition: 
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tag-animate.animate {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ===== 分页动画 ===== */
.pagination-animate {
    opacity: 0;
    transform: translateY(1rem);
    transition: 
        opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

/* ===== 页面加载动画 ===== */
.onload-animation {
    opacity: 0;
    animation: fade-in-up 300ms ease-out forwards;
}

.onload-animation-fade-in {
    opacity: 0;
    animation: fade-in 300ms ease-in forwards;
}

/* 渐进式动画延迟 */
.onload-animation:nth-child(1) { animation-delay: 0ms; }
.onload-animation:nth-child(2) { animation-delay: 50ms; }
.onload-animation:nth-child(3) { animation-delay: 100ms; }
.onload-animation:nth-child(4) { animation-delay: 150ms; }
.onload-animation:nth-child(5) { animation-delay: 200ms; }

/* ===== 关键帧动画 ===== */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(1.5rem) translateX(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

@keyframes fade-out-down {
    from {
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
    to {
        opacity: 0;
        transform: translateY(-1rem) translateX(-0.5rem);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== 性能优化 ===== */
.transition-main,
.transition-leaving,
.onload-animation,
.transition-slide-in,
.card-animation,
.enhanced-fade-in,
.sidebar-animate,
.card-animate,
.post-content-animate,
.navbar-animate,
.footer-animate,
.button-enhance,
.link-enhance,
.image-animate,
.search-animate,
.tag-animate,
.pagination-animate {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* 动画完成后清理 */
.animate-gpu {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.animation-complete {
    will-change: auto;
}

/* ===== 响应式调整 ===== */
@media (max-width: 768px) {
    html.is-animating .transition-main {
        transform: translateY(1rem) translateX(0.3rem);
    }
    
    html.is-animating.is-leaving .transition-leaving {
        transform: translateY(-0.8rem) translateX(-0.3rem);
    }
    
    .transition-slide-in {
        transform: translateY(15px) translateX(5px);
    }
    
    .card-animation {
        transform: translateY(20px) translateX(6px) scale(0.99);
    }
}

/* ===== 减少动画的用户偏好设置 ===== */
@media (prefers-reduced-motion: reduce) {
    .transition-main,
    .transition-leaving,
    .onload-animation,
    .transition-slide-in,
    .card-animation,
    .nav-animation,
    .enhanced-fade-in,
    .sidebar-animate,
    .card-animate,
    .post-content-animate,
    .navbar-animate,
    .footer-animate,
    .button-enhance,
    .link-enhance,
    .image-animate,
    .search-animate,
    .tag-animate,
    .pagination-animate {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== 高对比度模式支持 ===== */
@media (prefers-contrast: high) {
    .enhanced-fade-in,
    .card-animate,
    .post-content-animate {
        border: 1px solid currentColor;
    }
}

/* ===== 暗色模式动画调整 ===== */
@media (prefers-color-scheme: dark) {
    .button-enhance:hover {
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
    }
    
    .button-enhance:active {
        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
    }
}
